<template>
  <div class="schedules_content">
    <div v-init-screen-h>
      <div class="topBox add_btn_top">
        <el-button type="primary" class="addButton" size="mini" @click="add"
          ><i class="el-icon-plus" />添加
        </el-button>
      </div>
      <empty-data v-if="list.length == 0" />
      <el-row :gutter="20">
        <el-col
          :span="12"
          v-for="item in list"
          :key="item.id"
          :xs="24"
          :sm="6"
          :md="6"
          :xl="6"
          class="mb_sm"
        >
          <el-card shadow="always" :body-style="{ padding: '10px' }">
            <div slot="header" class="flex-x flex-space">
              <span style="font-weight: 600;">{{ item.name }}</span>
              <span>
                <el-button type="text" @click="edit(item)">编辑</el-button>
                <el-button type="text" @click="delSchedules(item.token)"
                  >删除</el-button
                >
              </span>
            </div>
            <!-- card body -->
           
            <div style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                触发器类型:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ item.triggerType }}
              </span>
            </div>
            <div v-if="item.triggerType == 'CronTrigger'" style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                Crontab表达式:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ item.triggerConfiguration.cronExpression }}
              </span>
            </div>
            <div v-else class="flex-x " style="margin-bottom: 10px;">
              <div style="margin-right: 10px;">
                <span style="margin-right: 4px;">
                  时间间隔:
                </span>
                <span style="color: #909399;font-size: 15px;">
                  {{ item.triggerConfiguration.repeatInterval }}
                </span>
              </div>
              <span style="margin-right: 4px;">
                执行次数:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ item.triggerConfiguration.repeatCount }}
              </span>
            </div>
            <div style="margin-bottom: 10px;">
              <span style="margin-right: 4px;">
                时间:
              </span>
              <span style="color: #909399;font-size: 15px;">
                {{ item.createdDate | formatDate }}
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 添加/编辑 -->
      <Dialog
        :dialogVisible.sync="dialogVisible"
        @close="e => e && init()"
        ref="dialogRef"
      ></Dialog>
    </div>
    <Pagination
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      :page-sizes="pageSizes"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import { getSchedulesList, delSchedules } from "@/api/schedules";
import Dialog from "./components/Dialog";

import Pagination from "@/views/common/page";
import emptyData from "@/views/common/emptyData";
import _ from "lodash";
export default {
  components: {
    Dialog,
    emptyData,
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
    async delSchedules(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await delSchedules(token);
        this.init();
        this.$msg({
          message: "删除成功",
          type: "success"
        });
      });
    },
    add() {
      this.dialogVisible = true;
    },
    edit(item) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dialogRef.form = _.cloneDeep(item);
      });
    },
    init() {
      getSchedulesList({
        page: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        const { results, numResults } = res.data;
        this.total = numResults;
        this.list = results;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.schedules_content {
  padding: 10px;
  background-color: #fff;
  /deep/ {
    .el-card__header {
      padding: 6px 10px;
    }
  }
}
</style>
